import React from "react";
import {connect} from "dva";
import {Col, DatePicker, Row} from "antd";
import * as Highcharts from 'highcharts';
// import HighchartsReact from 'highcharts-react-official';
import highcharts3d from 'highcharts/highcharts-3d'
import time, {dateFormat, getMockTime} from "@/utils/time";
import moment from "moment";


highcharts3d(Highcharts);


class LoseItemRate extends React.Component {


  state = {
    itemDict:{
      zt:"渣铁处理",
      ltlg:"炉体炉缸监控",
      zb:"指标检查",
      cz:"操作参数"
    },
    option: {
      chart: {
        type: 'pie',
        size: '100%',
        options3d: {
          enabled: true,
          alpha: 55,
          beta: 0,
          fitToPlot: true,
        },
        reflow: true,
      },
      title: {
        text: ''
      },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
      },
      credits: {
        enabled: false
      },
      plotOptions: {
        pie: {
          size: "90%",
          allowPointSelect: true,
          cursor: 'pointer',
          depth: 35,
          dataLabels: {
            enabled: true,
            distance: 1,
            format: '{point.percentage:.2f}%'
          },
          showInLegend: true,
          groupPadding: 1,
          groupZPadding: 1,
        }
      },
      series: [{
        type: 'pie',
        name: '占比',
      }]

    },
    current: time.getStartOfDay()
  }

  timePick = value => {
    this.state.current = value.toDate();
    this.getItemScore();
  };

  getItemScore = () => {
    this.props.dispatch({
      type: 'gaoluDiagnose/getItemScore',
      payload: {
        end: dateFormat(this.state.current),
      }
    });
  };

  async componentDidMount() {
    const {option, chart} = this.state;

    const payload =await getMockTime("GaoLuDiagnoseScore")
    this.setState({current:payload.current})

    // 基于准备好的dom，初始化highcharts实例
    this.state.chart = Highcharts.chart(document.getElementById("loseItemRate"), option);
    // TODO 大小自适应
    this.state.chart.reflow();
    this.props.dispatch({
      type: 'gaoluDiagnose/getItemScore',
      payload:{
        date: dateFormat(payload.current)
      }
    })

  }

  static getDerivedStateFromProps(nextProps, prevState) {
    //state 不需要更改
    const {itemScore} = nextProps;
    const {itemDict} = prevState
    if (itemScore !== undefined && itemScore !== null && itemScore !== prevState.itemScore && prevState.chart) {
        const {group} = itemScore
        const display = [];
        for (const item of group) {
            if (item.key !== 'total') {
              display.push({
                name: itemDict[item.key],
                y: item.totalScore - item.loseScore,
              })
            }
        }
        prevState.option.series[0].data = display;
        prevState.chart.update(prevState.option)

        return  {itemScore}
        // prevState.chart.series[0].setData(data.ore_fuel)
    }
    return null
  }

  render() {
    const {
      width = 100,
      height = 300,
    }
      = this.props;

    return (
      <div>
        <DatePicker
          showTime
          format="YYYY-MM-DD"
          placeholder="选择时间"
          defaultValue={moment(this.state.current, "YYYY-MM-DD")}
          onChange={this.timePick}
        />
      <div id="loseItemRate" style={{width: `${width}%`, height}}/>
      </div>

    )
  }
}


export default connect(({global, gaoluDiagnose, loading}) => ({
  global,
  itemScore:gaoluDiagnose.itemScore
}))
(LoseItemRate);
